<template>
  <div class="farmer-home">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>农产品总数</span>
              <el-icon><Goods /></el-icon>
            </div>
          </template>
          <div class="card-value">{{ statistics.productTotalCount }}</div>
          <div class="card-footer">在售商品: {{ statistics.productCount }}</div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>订单总数</span>
              <el-icon><List /></el-icon>
            </div>
          </template>
          <div class="card-value">{{ statistics.orderTotalCount }}</div>
          <div class="card-footer">
            总销售额: ¥{{ statistics.totalSales.toFixed(2) }}
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>景点总数</span>
              <el-icon><Location /></el-icon>
            </div>
          </template>
          <div class="card-value">{{ statistics.attractionTotalCount }}</div>
          <div class="card-footer">
            在线景点: {{ statistics.attractionCount }}
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>本月销售额</span>
              <el-icon><Money /></el-icon>
            </div>
          </template>
          <div class="card-value">¥{{ statistics.monthSales.toFixed(2) }}</div>
          <div class="card-footer">
            总销售额: ¥{{ statistics.totalSales.toFixed(2) }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近订单 -->
    <el-card class="recent-orders">
      <template #header>
        <div class="section-header">
          <h3>最近订单</h3>
          <el-link type="primary" @click="router.push('/farmer/orders')"
            >查看更多</el-link
          >
        </div>
      </template>

      <el-table :data="flattenedOrders" stripe>
        <el-table-column label="订单号" width="100" align="center">
          <template #default="scope">
            {{ scope.row.orderId }}
          </template>
        </el-table-column>

        <el-table-column label="商品名称" min-width="200">
          <template #default="scope">
            <div class="product-info">
              <el-image
                :src="scope.row.productAvatar"
                class="product-image"
                fit="cover"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <span>{{ scope.row.productName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="数量" width="100" align="center">
          <template #default="scope">
            {{ scope.row.quantity }}
          </template>
        </el-table-column>

        <el-table-column label="单价" width="120" align="center">
          <template #default="scope">
            ¥{{ scope.row.productPrice.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column label="总价" width="120" align="center">
          <template #default="scope">
            ¥{{ (scope.row.quantity * scope.row.productPrice).toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" width="180" align="center">
          <template #default="scope">
            {{ scope.row.createdTime }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { Goods, List, Money, Location, Picture } from "@element-plus/icons-vue";
import request from "@/utils/request";

const router = useRouter();

// 修改统计数据接口
interface Statistics {
  productCount: number; // 在售农产品个数
  productTotalCount: number; // 总的农产品个数
  orderTotalCount: number; // 总的订单数
  totalSales: number; // 总销售额
  attractionCount: number; // 当前上架景点数
  attractionTotalCount: number; // 上架总景点数
  monthSales: number; // 本月销售额
}

const statistics = ref<Statistics>({
  productCount: 0,
  productTotalCount: 0,
  orderTotalCount: 0,
  totalSales: 0,
  attractionCount: 0,
  attractionTotalCount: 0,
  monthSales: 0,
});

interface ShoppingCartItem {
  id: number;
  userId: number;
  productId: number;
  quantity: number;
  createdBy: string;
  createdTime: string;
  updateBy: string | null;
  updateTime: string | null;
  isDeleted: number;
  productName: string;
  productPrice: number;
  productAvatar: string;
}

interface Order {
  id: number;
  customerId: number | null;
  totalAmount: number | null;
  createdBy: string | null;
  createdTime: string | null;
  updateBy: string | null;
  updateTime: string | null;
  isDeleted: number | null;
  shoppingCartRespList: ShoppingCartItem[];
}

const recentOrders = ref<Order[]>([]);

// 将订单数据扁平化处理
const flattenedOrders = computed(() => {
  const flattened: any[] = [];
  recentOrders.value.forEach((order) => {
    order.shoppingCartRespList.forEach((item) => {
      flattened.push({
        orderId: order.id,
        ...item,
      });
    });
  });
  return flattened;
});

// 修改获取统计数据的方法
const getStatistics = async () => {
  try {
    const res = await request({
      url: "/user/rural/show/totalCount",
      method: "get",
    });
    if (res.success) {
      statistics.value = res.data;
    }
  } catch (error) {
    console.error("获取统计数据失败:", error);
  }
};

// 获取最近订单
const getRecentOrders = async () => {
  try {
    const res = await request({
      url: "/productOrder/order/list",
      method: "get",
    });
    if (res.success) {
      recentOrders.value = res.data;
    }
  } catch (error) {
    console.error("获取最近订单失败:", error);
  }
};

onMounted(() => {
  getStatistics();
  getRecentOrders();
});
</script>

<style lang="scss" scoped>
.farmer-home {
  padding: 20px;

  .data-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;

      span {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }

      .el-icon {
        font-size: 24px;
        color: #1890ff;
      }
    }

    .card-value {
      font-size: 28px;
      font-weight: bold;
      color: #1890ff;
      margin: 20px 0 10px;
      text-align: center;
    }

    .card-footer {
      font-size: 14px;
      color: #666;
      text-align: center;
      margin-bottom: 16px;
    }
  }

  .recent-orders {
    margin-top: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        position: relative;
        padding-left: 12px;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background: #1890ff;
          border-radius: 2px;
        }
      }

      .el-link {
        font-size: 14px;
      }
    }

    :deep(.el-table) {
      border-radius: 8px;
      overflow: hidden;

      th {
        background-color: #fafafa;
        color: #333;
        font-weight: 600;
        height: 48px;
        padding: 8px 16px;
      }

      td {
        padding: 12px 16px;
      }

      .product-info {
        display: flex;
        align-items: center;
        gap: 12px;

        .product-image {
          width: 40px;
          height: 40px;
          border-radius: 4px;
          object-fit: cover;
        }

        span {
          color: #333;
          font-weight: 500;
        }
      }

      .image-error {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f7fa;
        border-radius: 4px;
        color: #909399;
      }
    }
  }
}
</style> 